<template>
	<view>
		<u-tabs :list="tablist" :is-scroll="false" :current="tabcurrent" @change="tabchange"></u-tabs>
		<view class="salary-con">
			<view class="growth-rate back-blue">
				<view class="">薪酬成本增长率：</view>
				<view class="align ">
					<text class="sizemax">-3</text>%
				</view>
			</view>
			<view class="salary-flex">
				<view class="growth-rate back-gree">
					<view class="">本期总额：</view>
					<view class="sizemin">￥221,203.73</view>
					<view class="">本期人数：</view>
					<view class="sizemin">23</view>
				</view>
				<view class="growth-rate back-pingk">
					<view class="">上期总额：</view>
					<view class="sizemin">￥230,372.77</view>
					<view class="">上期人数：</view>
					<view class="sizemin">24</view>
				</view>
			</view>
		</view>

		<u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
		<u-card :title="title">
			<view class="" slot="body">
				<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" @touchstart="touchLineA" @touchmove="moveLineA"
				 @touchend="touchEndLineA" :style="{'width':cWidth*pixelRatio+'px','height':cHeight*pixelRatio+'px', 'transform': 'scale('+(1/pixelRatio)+')','margin-left':-cWidth*(pixelRatio-1)/2+'px','margin-top':-cHeight*(pixelRatio-1)/2+'px'}"></canvas>
			</view>
		</u-card>
	</view>
</template>

<script>
	import uCharts from '@/components/u-charts/u-charts.js';
	var _this;
	var canvaLineA = null;
	export default {
		data() {
			return {
				tablist: [{
					name: '总量'
				}, {
					name: '人均'
				}],
				list: [{
					name: '月'
				}, {
					name: '季'
				}, {
					name: '年',
					// count: 5
				}],
				current: 0,
				tabcurrent: 0,
				title: '薪酬成本总额度趋势',
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				chartData: {
					categories: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
					series: [{
						name: '当前',
						data: [235, 220, 225, 237, 204, 220, 230, 226, 223, 255, 262, 237],
						color: '#07fff7'
					}]
				}
			}
		},
		onLoad() {
			_this = this
			this.cWidth = uni.upx2px(750)
			this.cHeight = uni.upx2px(500)
			this.refreshList()
		},
		methods: {
			change(index) {
				this.current = index
			},
			tabchange(index) {
				this.tabcurrent = index
			},
			refreshList() {
				_this.showLineA("canvasLineA", this.chartData)
			},
			showLineA(canvasId, chartData) {
				canvaLineA = new uCharts({
					$this: _this,
					canvasId: canvasId,
					type: 'line',
					fontSize: 11,
					legend: {
						show: true,
						position: 'top',
					},
					dataLabel: false, // 隐藏数据点标签
					dataPointShape: true,
					background: '#FFFFFF',
					pixelRatio: _this.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					enableScroll: true, // 开启图表拖拽功能
					xAxis: {
						type: 'grid',
						itemCount: 4, // x轴单屏显示数据的数量，默认为5个
						// scrollShow: true, // 新增是否显示滚动条，默认false
						// scrollAlign: 'left', // 滚动条初始位置
						scrollBackgroundColor: '#F7F7FF', // 默认为 #EFEBEF
						scrollColor: '#DEE7F7', // 默认为 #A6A6A6
						// gridColor: '#CCCCCC',
						disableGrid: true, // 绘制Y坐标轴网格
						gridType: 'dash',
						dashLength: 8
					},
					yAxis: {
						gridType: 'dash',
						// gridColor: '#CCCCCC',
						// dashLength: 8,
						splitNumber: 5,
						min: 10,
						max: 180,
						format: (val) => {
							return val.toFixed(0) + 'k'
						}
					},
					width: _this.cWidth * _this.pixelRatio,
					height: _this.cHeight * _this.pixelRatio,
					extra: {
						line: {
							type: 'straight'
						}
					}
				});
			},
			// 触摸
			touchLineA(e) {
				canvaLineA.scrollStart(e)
			},

			// 移动
			moveLineA(e) {
				canvaLineA.scroll(e)
			},

			touchEndLineA(e) {
				canvaLineA.scrollEnd(e)
				//下面是toolTip事件，如果滚动后不需要显示，可不填写
				canvaLineA.showToolTip(e, {
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.salary-con {
		padding: 10rpx 20rpx;

		.growth-rate {
			color: #FFFFFF;
			padding: 20rpx;
			margin-bottom: 10rpx;
			border-radius: 10rpx;

			.sizemax {
				font-size: 66rpx;
				padding-right: 16rpx;
			}

			.sizemin {
				font-size: 34rpx;
				text-align: center;
			}

			.align {
				text-align: center;
			}
		}

		.salary-flex {
			display: flex;
		}

		// 背景颜色
		.back-blue {
			background: linear-gradient(to right, #88d8f0, #45bdf0);
		}

		.back-gree {
			flex: 1;
			background: linear-gradient(to right, #75fdff, #0eebff);
		}

		.back-pingk {
			flex: 1;
			margin-left: 16rpx;
			background: linear-gradient(to right, #ffcdd1, #ffaab6);
		}
	}
</style>
